<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宠物美容</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="seacher">
      <!-- 发布公告 -->
      <el-col :span="4">
        <el-button type="primary" @click="Visible = true">添加美容信息</el-button>
      </el-col>
    </el-row>
    <!-- 宠物美容类型 -->
    <h3><i>宠物洗澡类型</i></h3>
    <!-- 宠物美容 -->
    <el-table :data="petCareList" border style="width: 100%" class="tab">
      <el-table-column prop="cid" label="项目编号"> </el-table-column>
      <el-table-column prop="cname" label="项目名"> </el-table-column>
      <el-table-column prop="price" label="普通价格(RMB)"></el-table-column>
      <el-table-column prop="member_price" label="会员价格(RMB)"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.cid)"></el-button>
          <!-- 修改按钮 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.cid)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="isUpdate ? '修改信息' : '添加信息'" :visible.sync="Visible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="项目名:">
          <el-input v-model="form.cname"></el-input>
        </el-form-item>
        <el-form-item label="普通价格:">
          <el-input v-model.number="form.price"></el-input>
        </el-form-item>
        <el-form-item label="会员价格:">
          <el-input v-model.number="form.member_price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="!isUpdate" type="primary" @click="onSubmit">立即添加</el-button>
          <el-button v-else type="primary" @click="onUpdate">修改信息</el-button>
          <el-button @click="Visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { petCareList, updatePetCare, delPetCare, insertPetCare } from '@/api/petCare'
export default {
  name: 'PetGroomingManage',
  data() {
    return {
      petCareList: [],
      form: {
        cname: '',
        price: '',
        member_price: '',
        cid: null,
      },
      Visible: false,
      isUpdate: false,
    }
  },
  created() {
    this.getPetCareList()
  },
  methods: {
    async getPetCareList() {
      const result = await petCareList()
      if (result.status !== 0) return this.$message.error('网络异常，稍后再试～')
      this.petCareList = result.data
    },
    edit(cid) {
      console.log(cid)
      this.Visible = true
      this.isUpdate = true
      this.form.cid = cid
    },
    async del(cid) {
      console.log(cid)
      const confirmResult = await this.$confirm('此操作将永久删除该"信息", 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)

      if (confirmResult !== 'confirm') return

      const result = await delPetCare({ cid })
      console.log(result)
      if (result.status !== 0) return this.$message.error('删除失败！')
      this.$message.success('删除成功！')
      this.getPetCareList()
    },
    async onSubmit() {
      const { cname, price, member_price } = this.form
      const result = await insertPetCare({ cname, price, member_price })
      if (result.status !== 0) return this.$message.error(result.message)
      this.$message.success(result.message)
      this.form = {}
      this.Visible = false
      this.getPetCareList()
    },
    async onUpdate() {
      const result = await updatePetCare({ ...this.form })
      if (result.status !== 0) return this.$message.error(result.message)
      this.$message.success(result.message)
      this.form = {}
      this.isUpdate = false
      this.Visible = false
      this.getPetCareList()
    },
  },
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 40px;
}
.el-button {
  margin-top: 30px;
}
h3 {
  color: skyblue;
  margin-top: 10px;
}
</style>
